<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { SubmitBtn } from '@fl/components'

const { path } = useRoute()

const isSetting = path.includes('project-setting')
console.log('🚀 ~ isSetting:', isSetting)

const id = defineModel<any>('id')

const level = defineModel<any>('level')

const visible = defineModel<boolean>('visible', { required: true })

const showType = defineModel<'edit' | 'view'>('showType')

const isEdit = showType.value === 'edit'

const dialog = computed(() => isEdit ? '编辑详情' : '查看详情')

const formRef = ref()

const state = ref<any>({
    a1: '项目名称',
    a2: '项目编码',
    a3: '项目简称',
    a4: '推广名称',
    a5: '项目负责人',
},
)

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '项目名称',
        prop: 'a1',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: !isSetting,
        label: '项目来源',
        prop: 'a2',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '项目编码',
        prop: 'a2',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: level.value === 1 ? 12 : 24,
        },
        hideInForm: !isSetting,
        label: '系统项目编码',
        prop: 'a2',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: !isSetting,
        label: '所属公司',
        prop: 'a2',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: !isSetting,
        label: '一级项目名称',
        prop: 'a2',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: !isSetting || level.value === 1,
        label: '二级项目名称',
        prop: 'a2',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: !isSetting || level.value === 1,
        label: '项目联系人',
        prop: 'a2',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: !isSetting || level.value === 1,
        label: '联系方式',
        prop: 'a2',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '项目简称',
        prop: 'a3',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '推广名称',
        prop: 'a4',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '项目负责人',
        prop: 'a5',
        valueType: isEdit ? 'input' : 'text',
    },
]

function cancel() {
    visible.value = false
}

function reset() {
    id.value = ''
    level.value = 0
    formRef.value.formInstance.resetFields()
}
</script>

<template>
    <PlusDialog v-model="visible"
                :title="dialog"
                width="800"

                @cancel="cancel"
                @closed="reset"
    >
        <PlusForm ref="formRef"
                  v-model="state"
                  :columns="columns"
                  :label-width="130"
                  :has-footer="false"
                  class="max-h-600 overflow-x-hidden overflow-y-auto"
                  :row-props="{ gutter: 20 }"
        />

        <template #footer>
            <div class="mx-auto">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn v-if="showType === 'edit'"
                           type="primary"
                >
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>
